<style lang="less">
	@import "~assets/styles/table-common.less";
</style>
<template>
	<div class="search iper-detail">
		<Row>
			<Card>
				<Button @click="closeCurrentPage">返回</Button>
				<Button @click="audit" type="info" v-if="form.status=='0'" style="margin-left:5px">企业认证审核</Button>
				<Tabs :value="currTab">
					<TabPane :label="label" name="1">
						<Form ref="form" :model="form" :label-width="120" v-if="form">
							<FormItem label="企业名称">
								<p>{{form.companyName}}</p>
							</FormItem>
							<FormItem label="企业简介">
								<p>{{form.descr}}</p>
							</FormItem>							
							<FormItem label="企业LOGO">
								<div class="upload-list" :style="{width: '305px', height: '110px', lineHeight:'110px' }">
									<div>
										<img :src="form.logo" :style="{height: height}" />
										<div class="upload-list-cover">
											<Icon type="ios-eye-outline" @click="handleView(form.logo)"></Icon>
										</div>
									</div>
								</div>
							</FormItem>
							<FormItem label="营业执照">
								<div class="upload-list" :style="{width: '620px', height: '420px', lineHeight: '420px'}">
									<div>
										<img :src="form.businessLicense" :style="{height: height}" />
										<div class="upload-list-cover">
											<Icon type="ios-eye-outline" @click="handleView(form.businessLicense)"></Icon>
										</div>
									</div>
								</div>
							</FormItem>
							
							<FormItem label="组织机构代码">
								<p>{{form.orgCode}}</p>
							</FormItem>
							<FormItem label="企业性质">
								<p>{{form.enterpriseNatureName}}</p>
							</FormItem>
							<FormItem label="企业国别">
								<p>{{form.country}}</p>
							</FormItem>
							
							<FormItem label="企业类别">
								<p>{{form.categoryName}}</p>
							</FormItem>
							<FormItem label="企业邮箱">
								<p>{{form.email}}</p>
							</FormItem>
							<FormItem label="企业地址">
								<p>{{form.address}}</p>
							</FormItem>
							<FormItem label="企业网址">
								<p>{{form.website}}</p>
							</FormItem>
							<FormItem label="企业座机">
								<p>{{form.landline}}</p>
							</FormItem>
						</Form>

					</TabPane>
				</Tabs>


			</Card>
		</Row>

		<Modal title="图片预览" v-model="viewImage" :styles="{top: '30px'}" draggable>
			<img :src="imgUrl" alt="无效的图片链接" style="width: 100%;margin: 0 auto;display: block;">
			<div slot="footer">
				<Button @click="viewImage=false">关闭</Button>
			</div>
		</Modal>
		<Modal title="审批" v-model="auditModalVisible" :mask-closable="false" :width="550" :styles="{top: '30px'}">
			<Form ref="auditForm" :model="auditForm" :label-width="120" :rules="auditFormValidate" >
				<FormItem label="审核状态" prop="status">
					<RadioGroup v-model="auditForm.status" >
						<Radio :label="item.value" v-for="(item, i) in auditStatusList" :key="i">
							<span>{{item.title}}</span>
						</Radio>
					</RadioGroup>
				</FormItem>
				<FormItem label="审批意见" prop="reason" v-if="auditForm.status=='2'">
					<Input type="textarea" class="showWordLimit_textArea" :autosize="{ minRows: 4}" show-word-limit v-model.trim="auditForm.reason"
					 :maxlength="100" style="width:400px;" placeholder="请输入" />
				</FormItem>
			
			</Form>
			<div slot="footer">
				<Button type="text" @click="auditModalVisible=false">取消</Button>
				<Button type="primary" :loading="submitAuditLoading" @click="handleAuditSubmit">提交</Button>
			</div>
		</Modal>
		<!-- 全局加载动画 -->
		<circleLoading class="loading-position" v-show="loading" />
	</div>
</template>

<script>
	import circleLoading from "@/my-components/hboot/circle-loading.vue";
	import {
		getIperById,
		auditIper
	} from "@/api/iper";
	export default {
		name: "iper-detail",
		components: {
			circleLoading,
		},
		data() {
			return {
				currTab: '1',
				viewImage: false,
				imgUrl: "",
				loading: false,
				id: '',
				backRoute: '',
				width: "60px",
				height: "60px",
				form: {

				},
				auditStatusList:[
					{value:'1',title:'通过'},
					{value:'2',title:'驳回'},
				],
				auditForm: {
					status: '1', 
					reason: '', 		
				},
				auditFormValidate: {
					status: [{
						required: true,
						message: "请选择审批状态",
						trigger: "change"
					}],
					reason: [{
						required: true,
						message: "请输入审核意见",
						trigger: "blur"
					}],
				},
				submitAuditLoading: false,
				auditModalVisible:false,

			};
		},
		methods: {
			label(h) {
				let status = this.form.status;
				return h('div', {}, [
					h('span', {}, '企业认证信息'),
					h('span', {}, '（'),
					status == '0' ? h('span', {}, '待审核') :  status == '1' ? h('span', {
						style: {
							color: '#19be6b'
						}
					}, '已审核') : status == '9' ? h('span', {
						style: {
							color: '#ed4014'
						}
					}, '驳回') : status == '-1' ? h('span', {}, '未填写') : h('span', {}, ''),
					h('span', {}, '）'),
				])
			},
			//审核
			audit() {
				this.auditForm.status = '1';
				this.auditForm.reason = '';
				this.auditModalVisible = true;
			},
			//提交审核
			handleAuditSubmit() {
				this.$refs.auditForm.validate(valid => {
					if (valid) {
						this.submitAuditLoading = true;
						auditIper(this.id,this.auditForm).then(res => {
							this.submitAuditLoading = false;
							if (res.success) {
								this.$Message.success("审批成功");
								this.getData();
								this.auditModalVisible = false;
							}
						});
					}
				});
			},
			init() {
				this.backRoute = this.$route.query.backRoute;
				this.id = this.$route.params.id;
				this.getData();
			},
			handleView(imgUrl) {
				this.imgUrl = imgUrl;
				this.viewImage = true;
			},
			getData() {

				if (this.id) {
					this.loading = true;
					getIperById(this.id).then(res => {
						this.loading = false;
						if (res.success) {
							this.form = res.result;
						}
					});
				}

			},

			initMeta() {
				let permTypes = this.$route.meta.permTypes;
				if (permTypes !== null && permTypes !== undefined) {
					this.permTypes = permTypes;
				}
			},
			// 关闭当前页面
			closeCurrentPage() {
				this.$store.commit("removeTag", "iperDetail");
				localStorage.pageOpenedList = JSON.stringify(
					this.$store.state.app.pageOpenedList
				);
				this.$router.push({
					path: this.backRoute
				});
			}
		},
		mounted() {
			//this.initMeta();

			this.init();
		},
		watch: {
			// 监听路由变化
			$route(to, from) {
				if (to.name == "iperDetail") {
					this.init();
				}
			}
		}
	};
</script>
<style lang="less">
	.loading-position {
		position: absolute;
		right: 4px;
		z-index: 100;
		top: 1px;
	}

	.iper-detail {
		.ivu-form-item {
			margin-bottom: 0px;
		}

		.upload-list {
			display: inline-block;
			text-align: center;
			border: 1px solid transparent;
			border-radius: 4px;
			overflow: hidden;
			background: #fff;
			position: relative;
			box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
			margin-right: 5px;
		}

		.upload-list img {
			object-fit: cover;
		}

		.upload-btn {
			display: inline-block;
		}

		.upload-list-cover {
			display: none;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background: rgba(0, 0, 0, 0.6);
		}

		.upload-list:hover .upload-list-cover {
			display: block;
		}

		.upload-list-cover i {
			color: #fff;
			font-size: 20px;
			cursor: pointer;
			margin: 0 2px;
		}

		.list-group {
			display: inline-block;
		}

		.thumb-ghost {
			opacity: 0.5;
			background: #c8ebfb;
		}
	}
</style>
